@using WebApp.Extensions
@model Dto.ApiResponses.TrackLogResponses.TrackLogDetailResponse
@{
    ViewBag.CurrentPage = WebApp.Common.PageSetting.TrackLogNewPageSetting;
    var sectionId = (Request.IsAjaxRequest() ? "Ajax" : "View") + "_TrackLog_Add";
}
@section Scripts{
    <script type="text/javascript">

        require(['trackLog/add', 'Util'], function (api, util) {
            var model = util.toJS(@(Html.ToJson(Model)));
            $(function () { api.exec('@sectionId', model); });
        });
    </script>
}

<div class="container" data-bind="stopbinding: true">
    <section id="@sectionId">
        <div class="col-xs-12 col-sm-12 col-md-6">
            <div class="row">
                <div class="form-group">
                    <div class="col-md-10">
                        <label for="photo">Photo</label>
                        <div class="fileDragHolder">
                            <canvas id="imgCanvas" width="150" height="187"></canvas>
                            <div>
                                <a id="photo" href="#" data-bind="click: selectPhoto">Select File</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <div class="col-md-10">
                        <label for="tagid">Tag Id</label>
                        <input id="tagid" class="form-control " data-bind="value: tagId" placeholder="Tag Id" required />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <div class="col-md-10">
                        <label>Detected On</label>
                        <input type="text" class="form-control" data-bind="datepicker : detectedOn,  datepickerOptions : { format: 'MM/DD/YYYY' }" placeholder="Detected On">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="form-group">
                    <div class="col-md-10">
                        <label for="descriptn">Description</label>
                        <textarea id="descriptn" class="form-control" rows="3" data-bind="value: description" placeholder="Description"> </textarea>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-3"></div>
                <div class="col-sm-5 col-md-8">
                    <button class="btn btn-primary" data-bind="click: save">Submit</button>&nbsp;&nbsp;&nbsp;&nbsp;<button class="btn btn-primary" data-bind="click: cancel">Cancel</button>
                </div>
            </div>
        </div>
    </section>
</div>


